<template>
	<view class="container">
		<div class="header">
			<div class="location" >
				<p>码农</p>
			</div>
		</div>
		<div class="search">
			<input type="text" placeholder="吃出美好生活" @focus="goSearch" />
		</div>

		<div class="main" v-if="!isShowSearch && !searList.length">
			<!-- 广告位 -->
			<div class="advertising_position">
				<img src="https://gd-hbimg-other.huaban.com/10335bdb686247f51567a2e2d8fdfe803d52df541741946635YdfWwOWt_fw1200"
					alt="" />
			</div>

			<ul class="classify">
				<li v-for="item in 5" :key="item">
					<img src="https://gd-hbimg.huaban.com/f92a86f676c8f7f565960bd24812e07b96c4015b7fe95-aIVvBw_fw658webp"
						alt="" />
					<p>水果蔬菜</p>
				</li>
			</ul>

			<!-- 折扣 -->
			<div class="discount">
				<div class="top">
					<p><span></span>超划算</p>
					<p>查看全部</p>
				</div>

				<ul class="commodity">
					<li v-for="item in 3" :key="item">
						<img src="https://gd-hbimg.huaban.com/small/ed911a34d0472199f23005772969e085e9c676dd91599-C8Z2Zd_fw240webp"
							alt="" />
						<p>商品介绍，商品介绍</p>
						<div class="car">
							<p>￥39.9</p>
							<img src="../../static/car.svg" alt="" />
						</div>
					</li>
				</ul>
			</div>

			<!-- 商品列表 -->
			<div class="partition">
				<div class="top">
					<p><span></span>猜你喜欢</p>
				</div>
			</div>

			<div class="list">
				<div class="left">
					<div class="item" v-for="item,index in like_commodity_list" :key="item" v-show="index % 2 == 0">
						<img :src="item.showImage" alt="" />
						<p>{{item.commodityName}}</p>
						<div class="car">
							<div style="display: flex;align-items: flex-end;">
								<p>￥{{item.discountPrice || item.commodityPrice}}</p>
								<p v-if="item.discountPrice">￥{{item.commodityPrice}}</p>
							</div>
							<button @click="isShowPopup = true;clickCommodity = item" >
								<van-icon name="cart-o" size="14px" />
							</button>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="item" v-for="item,index in like_commodity_list" :key="item" v-show="index % 2 != 0">
						<img :src="item.showImage" alt="" />
						<p>{{item.commodityName}}</p>
						<div class="car">
							<div style="display: flex;align-items: flex-end;">
								<p>￥{{item.discountPrice || item.commodityPrice}}</p>
								<p v-if="item.discountPrice">￥{{item.commodityPrice}}</p>
							</div>
							<button @click="isShowPopup = true;clickCommodity = item" >
								<van-icon name="cart-o" size="14px" />
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<Popup :data="clickCommodity" :isShow='isShowPopup' @close='isShowPopup = false'></Popup>

	</view>
</template>

<script>
	import commodityItem from "../../components/commodity_item/index.vue"
	import Popup from "../../components/popup/index.vue"
	import {
		getCommodityList
	} from "../../api/classfiy.js"
	import {
		reverseGeocoding
	} from "../../api/home"
	export default {
		data() {
			return {
				locationInfo: null,

				isShowSearch: false,

				searList: [],

				like_commodity_list: [],
				
				clickCommodity:{},
				isShowPopup:false
				

			};
		},

		components: {
			commodityItem,
			Popup
		},


		onShow() {
			this.getLikeCommodityList() //商品列表
		},

		methods: {

			goSearch() {
				uni.navigateTo({
					url: '/subPackages/pages/search/index'
				})
			},

			

			// 猜你喜欢 商品列表
			async getLikeCommodityList() {
				let result = await getCommodityList({
					shelfOrNot: true
				})
				if (result.code == 20000) {
					this.like_commodity_list = result.data
				}
			},


		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #f8f9fa;
	}

	.header {
		width: 100%;
		height: 12vh;
		background: #2B9939;
		display: flex;
		align-items: flex-end;
		padding: 15px;
		box-sizing: border-box;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
	}

	.search {
		width: 100%;
		height: 50px;
		padding: 5px 10px;
		box-sizing: border-box;
	}

	.search input {
		width: 100%;
		height: 100%;
		border-radius: 15px;
		background: #f1f3f5;
		font-size: 12px;
		color: #333;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.main {
		width: 100%;
		height: calc(88vh - 50px);
		padding: 10px;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.advertising_position {
		width: 100%;
		height: 150px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.advertising_position img {
		width: 100%;
		min-height: 100%;
	}

	.classify {
		width: 100%;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}

	.classify li {
		width: 24%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.classify li img {
		/* width: 100%; */
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.classify li p {
		font-size: 12px;
		color: #666;
	}

	.discount {
		width: 100%;
		height: 180px;
		border-radius: 10px;
		background: #fff;
		margin-top: 10px;
	}

	.discount .top {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 12px;
	}

	.discount .top p:nth-child(1) {
		display: flex;
		align-items: center;
		font-weight: 700;
		color: #333;
	}

	.discount .top p:nth-child(1) span {
		display: inline-block;
		width: 6px;
		height: 20px;
		background-color: #2B9939;
		border-radius: 10px;
		margin-right: 5px;
	}

	.discount .top p:nth-child(2) {
		color: #2B9939;
	}

	.discount .commodity {
		width: 100%;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.discount .commodity li {
		width: 32%;
		height: 100%;
		overflow: hidden;
		padding: 10px;
		box-sizing: border-box;
	}

	.discount .commodity li img {
		width: 100%;
		/* aspect-ratio: 1/1; */
		height: 80px;

	}

	.discount .commodity li p {
		font-size: 12px;
		color: #666;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-top: 5px;
	}

	.discount .commodity li .car {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 5px;
	}

	.discount .commodity li .car img {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background-color: #2B9939;
		color: #fff;
		padding: 3px;
		box-sizing: border-box;
	}

	.partition {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}

	.partition .top {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 12px;
	}

	.partition .top p:nth-child(1) span {
		display: inline-block;
		width: 6px;
		height: 20px;
		background-color: #2B9939;
		border-radius: 10px;
		margin-right: 5px;
	}

	.partition .item {
		width: 24%;
		height: 100%;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-weight: 700;
		color: #333;
	}

	.partition .item p:nth-child(2) {
		color: #666;
		font-size: 12px;
		font-weight: 400;
	}

	.partition .top p:nth-child(1) {
		display: flex;
		align-items: center;
		font-weight: 700;
		color: #333;
	}

	.active {
		color: #2B9939 !important;
	}

	.active_p {
		background: #2B9939 !important;
		color: #fff !important;
		border-radius: 10px !important;
		padding: 2px 5px;
		box-sizing: border-box;
		font-size: 12px;
	}

	.list {
		width: 100%;
		display: flex;
	}


	.list .left,
	.list .right {
		width: 50%;
		/* padding: 10px; */
		box-sizing: border-box;
	}

	.list .item {
		width: 100%;
		margin-bottom: 10px;
		padding: 10px;
		box-sizing: border-box;
		background: #fff;
		border-radius: 10px;
	}

	.list .item img {
		width: 100%;
		height: 120px;
		border-radius: 10px;
	}

	.list .item p {
		font-size: 12px;
	}

	.list .item .car {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list .item .car p:nth-child(1) {
		color: #FF0F2C;
		font-size: 14px;
		font-weight: 600;
	}

	.list .item .car p:nth-child(2) {
		color: #999;
		font-size: 12px;
		text-decoration: line-through;
		margin-left: 5px;
	}

	.list .item .car button {
		width: 25px;
		height: 25px;
		background-color: #2B9939;
		padding: 5px;
		box-sizing: border-box;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin: 0;
	}

	.searchHistory {
		padding: 10px;
		box-sizing: border-box;
	}

	.searchHistory h3 {
		color: #333;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.searchHistory span {
		padding: 5px 8px;
		font-size: 12px;
		margin-right: 5px;
		color: #666;
		background: #f1f3f5;
		border-radius: 20px;
	}
</style>